<template>
    <div class="home">
        <div class="home-header">
            <ul class="t-c">
                <li>
                    <h3>学生档案</h3>
                    <p>{{info.student}}</p>
                </li>
                <li>
                    <h3>教学计划</h3>
                    <p>{{info.plan}}</p>
                </li>
                <li>
                    <h3>活动展开</h3>
                    <p>{{info.activity}}</p>
                </li>
                <li>
                    <h3>教案</h3>
                    <p>{{info.courseware}}</p>
                </li>
                <li>
                    <h3>工作总结</h3>
                    <p>{{info.work}}</p>
                </li>
            </ul>
        </div>
        <div class="home-content">
            <el-row :gutter="20">
                <el-col :span="17" class="calendar-warp">
                    <el-button class="btn-add"  type="primary" @click="addrecord">新增康复记录</el-button>
                    <elecalendar class="calendar" @selectDate="selectDateHandler">
                        <template
                            slot="dateCell"
                            slot-scope="{date, data}">
                            <p :class="data.isSelected ? 'is-selected' : ''">
                                {{ data.day.split('-').slice(1)[1] }}
                            </p>
                            <div v-if="datalist[data.day]" class="calendar-info">
                                <span v-for="(item,index) in datalist[data.day]" :key="index" class="pointer" @click="getCurrentStudyInfo(item)">
                                    {{item.name}}
                                    <i v-if="index != datalist[data.day].length - 1">,</i>
                                </span>
                            </div>
                        </template>
                    </elecalendar>
                </el-col>
                <el-col :span="7" class="card-info">
                    <el-card class="box-card h-100" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span>新闻公告</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="moreHandler">更多</el-button>
                        </div>
                        <div v-for="(info,index) in infoLists" :key="index" class="text-item clearfix pointer" @click="lookdes(info)">
                            <span class="fl t-overflow" style="width:140px;">{{info.AnsTitle}}</span>
                            <span class="time fr">{{info.AnsDate}}</span>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="home-footer">
            <!-- 底部可视化图表 -->
            <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                    <span>资源教室使用情况</span>
                    <div class="fr clearfix">
                        <div class="fl">
                            <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect">
                                <el-menu-item index="7">7天</el-menu-item>
                                <el-menu-item index="30">30天</el-menu-item>
                                <el-menu-item index="90">90天</el-menu-item>
                            </el-menu>
                        </div>
                        <!-- <div class="fl">
                            <el-date-picker
                            v-model="date"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                            </el-date-picker>
                        </div> -->
                    </div>
                </div>
                <div class="hart">
                    <div id="myEcharts" style="width:100%;height:300px;"></div>
                    <!-- <ve-line :data="chartData" :settings="chartSettings"></ve-line> -->
                </div>
            </el-card>
        </div>
        <ele-k-form ref="kfjl" :studylist="studyList" @addsuccess="getdaydata"></ele-k-form>
        <ele-study-info ref="lookstudyinfo" :syudyid="studyId"></ele-study-info>
    </div>
</template>

<script>

import eleKForm from './kfjl.vue'
import eleStudyInfo from './info.vue'
import elecalendar from 'element-ui/packages/calendar'
var echarts = require('echarts');
import {gettj_home1, gettj_home,getAnnouncements,getAnnouncementsmodel, getAnnouncementsAll, getAnnouncementsAll1,gettj_home2} from '@/api/index.js'
export default {
    name: 'home',
    components: {
        eleKForm,
        eleStudyInfo,
        elecalendar
    },
    data() {
        this.chartSettings = {
            xAxisType: 'time'
        }
        return {
            infoLists:[],
            datalist:{},
            pickerOptions: {
                
            },
            myChart:null,
            chartData: {},
            date:'',
            activeIndex:'7',
            studyId:'',
            info:{},
            c_y:'',
            c_m:''
        }
    },
    computed:{
        studyList() {
            return this.$store.state.allStudyList;
        }
    },
    created(){
        this.$store.dispatch('getStudyListAll');
        this.getInitData();
    },
    mounted() {
        this.$nextTick(() => {
            this.myChart = echarts.init(document.getElementById('myEcharts'));
        })
        
    },
    methods:{
        getInitData(){
            this.c_y = new Date().getFullYear();
            this.c_m = new Date().getMonth() + 1;
            this.getdaydata()
            gettj_home().then((res) => {
                if(res) {
                    this.info = res;
                }
            }).catch((err) => {

            })
            getAnnouncementsAll({bPage:1,bPage1:10,bRead:1}).then((res) => {
                if(res) {
                    this.infoLists = res.tableData;
                }
            }).catch((err) => {

            })
            this.getchartData('7');
        },
        getchartData(day){
            gettj_home2({bTjDays:day}).then(res => {
                console.log(res);
                this.setecharts(res)
            })
        },
        setecharts(data){
            let option = {
                title: {
                    text: '教室资源使用'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        },
                    }
                },
                legend: {
                    data:['教室资源使用']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : data.map(item => item.ClassTime),
                        axisLabel:{
                            interval:0,
                            rotate:"90"
                        },
                        boundaryGap:false
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'教室资源使用',
                        type:'line',
                        stack: '总量',
                        areaStyle: {},
                        data:data.map(item => item.Records)
                    },
                    
                ]
            };
            this.myChart.setOption(option)
        },
        //  获取日程数据
        getdaydata(){
            gettj_home1({bYear:this.c_y,bMonth:this.c_m}).then((res) => {
                if(res && Array.isArray(res)) {
                    let result = {};
                    for (let i = 0; i < res.length; i++) {
                        const date = res[i];
                        let name = date.FullName.split('、');
                        let id = date.studyId.split('、');
                        let arr = [];
                        for (let j = 0; j < name.length; j++) {
                            const item = name[j];
                            arr.push({
                                name:item,
                                id:id[j]
                            })
                        }
                        result[date.ClassTime] = arr;
                    }
                    this.datalist = result;
                }
            }).catch((err) => {

            })
        },
        selectDateHandler(val){
            let day = val.split('-');
            this.c_y = day[0];
            this.c_m = day[1];
            this.getdaydata();
        },
        getCurrentStudyInfo(item) {
            console.log(item);
            this.studyId = item.id;
            this.$refs.lookstudyinfo.dialogVisible = true;
        },
        // 
        lookdes(item) {
            this.$router.push({path:'/home/notice-des',query:{bAnsID:item.AnsID,bTaskID:item.TaskID}})
            
        },
        moreHandler() {
            this.$router.push({path:'/home/notice-list'})
        },
        handleSelect(day) {
            this.getchartData(day);
        },
        // 新增康复记录
        addrecord(){
            this.$refs.kfjl.dialogVisible = true;
        }
    }
}
</script>
<style lang="less">
.home-footer{
    .el-menu{
        .el-menu-item{
            height: 40px;
            line-height: 40px;
        }
        border-bottom-width: 0 !important;
        
    }
}
</style>

<style lang="less" scoped>
.home-header{
    padding-top:20px;
    ul{
        display: flex;
        justify-content: space-between;
        li{
            background-color: red;
            width:200px;
            height:100px;
            padding-top:20px;
            box-sizing: border-box;
            color:#fff;
            h3{
                font-size: 16px;
                margin-bottom:5px;
            }
            p{
                font-size:28px;
                font-weight: 700;
            }
            &:nth-child(1){
                background-color: rgba(88, 163, 247, 1);
            }
            &:nth-child(2){
                background-color: rgba(254, 192, 61, 1);
            }
            &:nth-child(3){
                background-color: rgba(251, 98, 96, 1);
            }
            &:nth-child(4){
                background-color: rgba(51, 204, 153, 1);
            }
            &:nth-child(5){
                background-color: rgba(153, 102, 255, 1);
            }
        }
    }
}
.home-content {
    margin-top: 20px;
    .text-item{
        font-size:12px;
        height: 30px;
        line-height: 30px;
        &:hover{
            color:#409EFF;
        }
        .time{
            color:#999;
            display: inline-block;
            margin-left:5px;
        }
    }
    .calendar-info{
        span{
            font-size: 12px;
            &:hover{
                color:bisque;
                text-decoration: underline;
            }
        }
    }
    .calendar,.card-info{
        height:650px;
    }
}
.home-footer{
    margin-top: 20px;
    .el-menu{
        .el-menu-item{
            height: 40px;
            line-height: 40px;
        }
    }
}
.calendar-warp{
    position: relative;
    .btn-add{
        position: absolute;
        right: 229px;
        top: 12px;
        padding: 6px;
    }
}
</style>
